<template>
  <div class="agent-only">
    <a class="picture" v-for="(agent, index) of onlyagent" :key="index" :href="url+'/channel_brand.htm?id='+agent.id">
      <div class="agent">
        <img :src="url+agent.img" width="150" height="93">
        <div class="content">
          <p class="en-name people-name">{{agent.name}}</p>
          <p class="ch-name people-name">{{agent.cnName}}</p>
          <p class="remark">{{agent.remark}}</p>
        </div>
        <!--<a class="look" :href="url+'/channel_brand.htm?id='+agent.id">查看详情</a>-->
      </div>
    </a>
  </div>
</template>

<script>
  export default{
    name: 'agent',
    props: ['onlyagent'],
    data () {
      return {
        url: 'http://www.finewest.cn'
      }
    }
  }
</script>

<style scope lang="scss">
  .agent-only{
    background-color: #ffffff;
    margin-bottom: 4px;
      a.picture{
        display: block;
        position: relative;
        height: 113px;
        margin:0 15px;
        &:not(:last-child){
           border-bottom: 1px solid #f5f5f5;
        }
        .agent{
          margin: 0 -15px;
          img{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 150px;
            height: 93px;
          }
          .content{
            padding: 10px 12px 10px 162px;
            p.people-name{
              font-size: 12px;
              color: #444444;
            }
            p.ch-name{
              margin: 9px 0 24px;
            }
            p.remark{
              font-size: 10px;
              color: #555555;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
            }
          }
        }
      }
      /* p{
        float: left;
        font-size: 10px;
        line-height: 12px;
        margin-top: 10px;
        color: #555555;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        overflow: hidden;
        margin-right: 11px;
        width: calc(100% - 172px);
      }
      a.look{
        font-size: 12px;
        color: #000000;
        position: absolute;
        right: 11px;
        bottom: 10px;
      } */
    }
</style>
